<!DOCTYPE html>

<html>
    <head>
    	<meta charset="utf-8">
        <title>&{get('title')}</title>
        
        <link rel="stylesheet" href="@{'/public/stylesheets/bootstrap.min.css'}">
        <style type="text/css">
			body {
				padding-top: 60px;
			}
		</style>
        
        #{get 'moreStyles' /}
        
        <link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.png'}">
        <script src="@{'/public/javascripts/jquery-1.5.2.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
        <script src="@{'/public/javascripts/jquery.form.js'}" type="text/javascript" charset="${_response_encoding}"></script>
        <script src="@{'/public/jquery-ui/jquery-ui-1.8.16.custom.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
         <script src="@{'/public/javascripts/jquery.dotimeout.js'}" type="text/javascript" charset="${_response_encoding}"></script>
        
        <script src="@{'/public/javascripts/backbone/underscore.js'}" type="text/javascript" charset="${_response_encoding}"></script>
        <script src="@{'/public/javascripts/backbone/backbone.js'}" type="text/javascript" charset="${_response_encoding}"></script>
        
        <script src="@{'/public/javascripts/bootstrap/bootstrap-modal.js'}"></script>
	    <script src="@{'/public/javascripts/bootstrap/bootstrap-alerts.js'}"></script>
	    <script src="@{'/public/javascripts/bootstrap/bootstrap-twipsy.js'}"></script>
	    <script src="@{'/public/javascripts/bootstrap/bootstrap-popover.js'}"></script>
	    <script src="@{'/public/javascripts/bootstrap/bootstrap-dropdown.js'}"></script>
	    <script src="@{'/public/javascripts/bootstrap/bootstrap-scrollspy.js'}"></script>
	    <script src="@{'/public/javascripts/bootstrap/bootstrap-tabs.js'}"></script>
	    <script src="@{'/public/javascripts/bootstrap/bootstrap-buttons.js'}"></script>
	    
	    <script src="@{'/public/javascripts/ideonlab/ideon.js'}"></script>
	    
	    <script id="message-template" type="text/template">
	    <div class="alert-message <%= type %>">
		    <a class="close" href="#">&times;</a>
		    <p><%= strong ? "<strong>"+strong+"</strong> " : ""%><%= message %></p>
			<% if(actions) { %>
				<div class="alert-actions">
				<% for(var counter=0; counter < actions.length; counter++) { %>
					<a class="btn small <%= actions[counter].type ? actions[counter].type : ""%>" href="#"><%= actions[counter].description %></a>
				<% } %>
				</div>
			<% } %>
	    </div>
    	</script>
    	
    	 <script id="confirmationMessage-template" type="text/template">
	    <div class="alert-message <%= type %>">
		    <a class="close" href="#">&times;</a>
		    <p><%= strong ? "<strong>"+strong+"</strong> " : ""%><%= message %></p>
			<div class="alert-actions">
				<a name="confirmation" class="btn small confirmation" href="#">Confirm</a>
				<a name="cancel" class="btn small cancel" href="#">Cancel</a>
			</div>
	    </div>
    	</script>
    	
    	<script id="focusModal-editor-template" type="text/template">
		<div class="modal-header">
			<a href="#" class="close">&times;</a>
    		<h3><%= model.isNew() ? "A�adir foco" : "Editar foco: "+ model.get("title")%></h3>
		</div>
		<div class="modal-body">
			<form>
				<fieldset>
					<div class="clearfix">
						<label for="focus_title">Title</label>
						<div class="input">
							<input id="focus_title" type="text" value="<%= model.get("title") ? model.get("title") : ''%>"/>
							<span class="help-inline"></span>
						</div>
					</div>
					<div class="clearfix">
						<label for="focus_description">Description</label>
						<div class="input">
							<textarea id="focus_description" type="text"><%= model.get("description") ? model.get("description") : ''%></textarea>
							<span class="help-inline"></span>
						</div>
					</div>
				</fieldset>
			<form>
		</div>
		<div class="modal-footer">
			<button name="cancel" class="btn" type="reset">Cancel</button>
			<button name="save" class="btn primary">Save</button>
		</div>
</script>

    	#{get 'moreTemplates' /}
    
        <script type="text/javascript">
        	Message = Backbone.Model.extend({
            	defaults: {
            		"type":		"info",
            		"strong":	"",
            		"message":	"This is a default message",
            		"actions":	[],
            	},
            });
            
        	Messages = Backbone.Collection.extend({
            	model: Message,
            });
        	
        	MessagesBox = Backbone.View.extend({

            	initialize: function() {
            		this.collection.bind("add", this.render, this);
            	},

            	render: function() {
                	var self = this;
                	$("messages_box").html("");
                	this.collection.each(function(message) {
                    	var messageView = message.get("actions") ? new MessageConfirmationItem({model: message}) : new MessageItem({model: message});
                    	$("#messages_box").append(messageView.render().el);
                    });
                    this.collection.reset();
                	return this;
                },

                clear: function() {
                    console.log("MessagesBox -> clear");
                    $("messages_box").html("");
                }
            });

			MessageItem = Backbone.View.extend({
				tagName: "div",
				template: _.template($("#message-template").html()),
				//displayLength: 5000,
				
				events: {
					"click .close":		"close",
				},
				
				initialize: function() {
					this.className = "alert-message " + this.model.get("type");
				},
				
				render: function() {
					//$(this.el).hide();
					$(this.el).html(this.template(this.model.toJSON()));
					//$(this.el).slideDown();
					//var self = this;
					//$.doTimeout(this.displayLength, function() {
			        //	$(self.el).slideUp();
			        //    $.doTimeout(2000, function() {
			        //        self.close();
			        //    });
			       	//});
				        
					return this;
				},

				close: function() {
					console.log("close!!!");
					$(this.el).remove();
				}
				
			});

			MessageConfirmationItem = MessageItem.extend({
				template: _.template($("#confirmationMessage-template").html()),
				/*events: function() {
						var events = {
							"click .close":		"close",
						};
						
						for(var counter=0; counter < this.model.get("actions").length; counter++) {
							var action = this.model.get("actions")[counter];
							this[counter+"_out"] = action.fn;
							console.log(this);
							_.bind(action.fn, this);
							events["click ."+ action.type] = counter+"_out";
						}
						return events;
					},*/
				events: {
					"click .close":						"close",
					"click a[name=confirmation]":		"confirmation",
					"click a[name=cancel]":				"close",
				},

				initialize: function() {
					this.className = "alert-message " + this.model.get("type");
				},
				
				confirmation: function(e) {
					console.log("Confirmation!!!");
					var goalModel = this.model.get("element");
					//console.log(goalModel);
					goalModel.trigger("confirmation");
					e.stopPropagation();
					this.close();
				},

				createFn: function(fn) {
					var self = this;
					return function() {
						console.log("Create fn: " + fn);
						if(fn) fn();
						self.close();
					}
				},
			});
			
			var messages = new Messages();
        	$(document).ready(function() {
        		$(".topbar").dropdown();
        		/*$('.topbar input').bind('click', function (e) {
        			  e.stopPropagation();
       			});*/

        		
        		/*var messagesArray = [];
        		var message1 = new Message({type: "error", message: "Soy un mensaje de error!! Eso es debido a que se ha producido un fallo en el sistema"});
        		var message2 = new Message({type: "warning", strong:"Esto seria negrita!", message: "Soy un mensaje de warning!!"});
        		var message3 = new Message({type: "success", message: "Soy un mensaje de success!!"});
        		var message4 = new Message({message: "Soy un mensaje de success!!", actions: [{type: "confirmation", description: "Confirmar", fn: function(){ console.log("eeee"); this.model.destroy();}},
					{type: "dismiss", description: "Cancelar", fn: function(){ this.close();}}]});
        		
        		messagesArray.push(message1);
        		messagesArray.push(message2);
        		messagesArray.push(message3);
        		messagesArray.push(message4);
       			var messages = new Messages(messagesArray);

       			*/
       			//box.clear();
        		var box = new MessagesBox({collection : messages});
            });
        	
    		
   			
   			//var message1 = new Message({type: "error", message: "Soy un mensaje de error!! Eso es debido a que se ha producido un fallo en el sistema"});
   			//messages.add(message1);
        </script>
        #{get 'moreScripts' /}
    </head>
    <body>
        <div class="topbar-wrapper">
        	#{include 'topbar.html' /}
        </div>
        #{doLayout /}
    </body>
    
    
</html>
